@function background-style($path, $position: left, $size: contain, $repeat: no-repeat) {
    @return $repeat $position / $size url('@/assets/BABYLONIMG/#{$path}.png');
}

.container {
    position: relative;
    overflow: hidden;
    background-color: #0a1620;

    .rotateConTent {
        position: absolute;
        top: 72px;
        left: 50%;
        transform: translateX(-50%);
        z-index: 10;
        gap: 140px;

        .icon {
            width: 42px;
            height: 42px;
            position: absolute;
            top: 50%;
            right: 27%;
            transform: translateY(-50%);
        }

        .content {
            width: 138px;
            height: 39px;
            margin-left: -40px;
            background: background-style('chargeBG', center);

            p {
                font-family: YouSheBiaoTiHei;
                font-size: 28px;
                writing-mode: horizontal-tb;
                word-spacing: 0px;
                letter-spacing: 5px;
                text-orientation: upright;
                color: transparent;
                background: linear-gradient(0deg, rgb(0, 255, 240) 0px, rgb(255, 255, 255) 100%) text;
                user-select: text;
            }
        }

        &-left {
            .icon {
                background: background-style('parkIcon', center, cover);
            }
        }

        &-right {
            .icon {
                background: background-style('chargeIcon', center, cover);
            }
        }

        img {
            width: 117px;
            height: 117px;
            filter: hue-rotate(313deg) saturate(100%) brightness(100%) contrast(100%);
        }
    }

    &-model {
        width: 55%;
        height: 80%;
        position: absolute;
    }

    &-left,
    &-right {
        display: flex;
        flex-direction: column;
        height: 100%;
        z-index: 2;
        padding-top: 80px;
        padding-bottom: 27px;
    }

    &-left {
        width: 28.7%;
        padding-left: 38px;
        background: background-style('leftSperRing', center, cover);
    }

    &-right {
        width: 28.4375%;
        padding-right: 5px;
        background: background-style('rightSperRing', center, cover);
        align-items: flex-end;
    }
    &-center{
        width: 945px;
        height: 179px;
        position: absolute;
        left: 50%;
        bottom: 30px;
        transform: translateX(-50%);
        background: no-repeat center / contain;
    }
    .borders {
        position: absolute;
        z-index: 1;
    }

    .top-border {
        width: 100%;
        height: 72px;
        left: 0;
        top: 0;
        background: background-style('topborder', center, cover);
        z-index: 3;

        .systemTitle {
            font-size: 50px;
            color: #93fff8;
        }
    }

    .left-border {
        background: background-style('leftborder');
        left: 0;
        top: 44px;
        width: 38px;
        height: 94.5370%;
        background-size: 100% 100%;
    }

    .right-border {
        background: background-style('rightborder', right);
        right: 0;
        top: 44px;
        width: 38px;
        height: 94.5370%;
        background-size: 100% 100%;
    }

    .bottom-border {
        left: 0;
        bottom: 0;
        background: background-style('bottomborder', bottom);
        width: 100%;
        height: 57px;
    }
}